<template>
      <div class="app-container">
            <div class="filter-container">
                  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <!-- IP地址管理标签 -->
                        <el-tab-pane label="IP地址" name="IPAddress">
                              <div class="app-container" v-if="activeName === 'IPAddress'">
                                    <div class="filter-container">
                                          <el-select class="filter-item" v-model="inPageTemp.netType" placeholder="请选择网络类型" @change="selectNetType">
                                                <el-option v-for="netType in inPageNetTypeList" :key="netType.dictKey" :label="netType.dictValue" :value="netType.dictKey"></el-option>
                                          </el-select>
                                          <el-select class="filter-item" v-model="inPageTemp.IPSegment" placeholder="请选择IP网段">
                                                <el-option v-for="IPSegment in inPageIPSegmentList" :key="IPSegment.ipSegmentId" :label="IPSegment.ipSegment" :value="IPSegment.ipSegmentId"></el-option>
                                          </el-select>
                                          <el-select class="filter-item" v-model="inPageTemp.state" placeholder="请选择状态">
                                                <el-option label="全部状态" value="2"></el-option>
                                                <el-option label="已分配" value="1"></el-option>
                                                <el-option label="未分配" value="0"></el-option>
                                          </el-select>
                                          <el-input style="width: 218px;" class="filter-item" placeholder="请输入IP地址" v-model="inPageTemp.ip">
                                          </el-input>
                                          <el-button class="filter-item" type="primary" icon="search" @click="getIpInfo('check')">
                                                搜索
                                          </el-button>
                                    </div>
                                    <div class="filter-container">
                                          <el-dropdown class="filter-item" style="float:right;margin-left:5px;" trigger="click" @command="createIP">
                                                <el-button icon="edit">
                                                      新增
                                                </el-button>
                                                <el-dropdown-menu slot="dropdown">
                                                      <el-dropdown-item command="IPSegment">IP段</el-dropdown-item>
                                                      <el-dropdown-item command="IPAddress">IP地址</el-dropdown-item>
                                                </el-dropdown-menu>
                                          </el-dropdown>
                                          <el-button class="filter-item" style="float:right;margin-left:5px;" @click="importVisible=true,importStatus='brand'">导入</el-button>
                                          <el-dropdown class="filter-item" style="float:right" trigger="click" @command="IPexport">
                                                <el-button>
                                                      导出
                                                </el-button>
                                                <el-dropdown-menu slot="dropdown">
                                                      <el-dropdown-item command="all">导出列表</el-dropdown-item>
                                                      <el-dropdown-item command="template">导出模版</el-dropdown-item>
                                                </el-dropdown-menu>
                                          </el-dropdown>
                                    </div>
                                    <el-table :data="tableData" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

                                          <el-table-column align="center" label="序号" width="65">
                                                <template scope="scope">
                                                      <span>{{scope.$index+1+(listQuery.page-1)*listQuery.limit}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="网络类型">
                                                <template scope="scope">
                                                      <span>{{scope.row.netTypeName}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="IP网段" width="150">
                                                <template scope="scope">
                                                      <span>{{scope.row.ipSegment}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="IP" width="150">
                                                <template scope="scope">
                                                      <span>{{scope.row.ip}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="状态">
                                                <template scope="scope">
                                                      <span :class="scope.row.state=== '1' ?'infoColor':'silverColor'">{{ scope.row.state === '1' ?"已分配":"未分配" }}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="申请人">
                                                <template scope="scope">
                                                      <span>{{scope.row.applyPerson}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="用途">
                                                <template scope="scope">
                                                      <span>{{scope.row.purpose}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="操作" width="260">
                                                <template scope="scope">
                                                      <el-button size="small" type="primary" @click="allotIp(scope.row)">
                                                            分配
                                                      </el-button>
                                                      <el-button size="small" type="warning" @click="releaseIp(scope.row)">
                                                            释放
                                                      </el-button>
                                                      <el-button size="small" type="success" @click="updateIp(scope.row)">
                                                            编辑
                                                      </el-button>
                                                      <el-button size="small" type="danger" @click="deleteIp(scope.row)">
                                                            删除
                                                      </el-button>
                                                </template>
                                          </el-table-column>
                                    </el-table>
                                    <div v-show="!listLoading" class="pagination-container">
                                          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="this.listQuery.total">
                                          </el-pagination>
                                    </div>
                              </div>
                        </el-tab-pane>
                        <!-- 交换机接口标签 -->
                        <el-tab-pane label="交换机接口" name="switchInterface">
                              交换机接口
                        </el-tab-pane>
                        <!-- VLAN管理标签 -->
                        <el-tab-pane label="VLAN管理" name="VLANManage">
                              VLAN管理
                        </el-tab-pane>
                  </el-tabs>
            </div>
            <el-dialog title="新增IP段" :visible.sync="ipSegmentFormVisible">
                  <el-form :model="ipSegmentTemp" :rules="ipSegmentRules" ref="ipSegmentTemp" label-position="top">
                        <el-form-item label="IP段分类" prop="netType">
                              <el-select class="filter-item" v-model="ipSegmentTemp.netType" placeholder="请选择网络类型" :style="netTypeWidth">
                                    <el-option v-for="netType in netTypeList" :key="netType.dictKey" :label="netType.dictValue" :value="netType.dictKey"></el-option>
                              </el-select>
                        </el-form-item>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="所属网段" prop="ipSegment">
                                          <el-input v-model="ipSegmentTemp.ipSegment" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label=" ">
                                          <div style="padding-top:7px;">网段写法：192.168.1.0/24</div>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="起始IP" prop="startIp">
                                          <el-input v-model="ipSegmentTemp.startIp" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label="结束IP" prop="endIp">
                                          <el-input v-model="ipSegmentTemp.endIp" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="ipSegmentFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmIPSegment">确 定</el-button>
                  </div>
            </el-dialog>

            <!-- <el-dialog :title="serverText[serverStatus]" :visible.sync="serverFormVisible">
                                                                                                                                                                        <el-form :model="serverTemp" :rules="serverRules" ref="serverTemp">
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="设备类型" prop="eqptTypeName" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="serverTemp.eqptTypeName" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="品牌名称" prop="brandId" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-select v-model="serverTemp.brandId" placeholder="请选择品牌" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="brand in eqptBrandList" :key="brand.brandId" :label="brand.brandName" :value="String(brand.brandId)"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="设备型号" prop="modelName" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="serverTemp.modelName" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="设备规格" prop="eqptSpec" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-select v-model="serverTemp.eqptSpec" placeholder="请选择设备规格" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="eqptSpec in eqptSpecList" :key="eqptSpec.dictKey" :label="eqptSpec.dictValue" :value="eqptSpec.dictKey"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="CPU品牌" prop="CPUBrandId" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-select v-model="serverTemp.CPUBrandId" placeholder="请选择CPU品牌" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="CPU in CPUList" :key="CPU.brandId" :label="CPU.brandName" :value="String(CPU.brandId)"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="核数" prop="CPUCapacity" :label-width="amountWidth">
                                                                                                                                                                                                <el-input v-model.number="serverTemp.CPUCapacity" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="数量" prop="CPUAmount" :label-width="amountWidth">
                                                                                                                                                                                                <el-input v-model.number="serverTemp.CPUAmount" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="内存品牌" prop="memoryBrandId" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-select v-model="serverTemp.memoryBrandId" placeholder="请选择内存品牌" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="memory in memoryList" :key="memory.brandId" :label="memory.brandName" :value="String(memory.brandId)"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="容量" prop="memoryCapacity" :label-width="amountWidth">
                                                                                                                                                                                                <el-input v-model="serverTemp.memoryCapacity" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="数量" prop="memoryAmount" :label-width="amountWidth">
                                                                                                                                                                                                <el-input v-model.number="serverTemp.memoryAmount" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="电源品牌" prop="sourceBrandId" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-select v-model="serverTemp.sourceBrandId" placeholder="请选择电源品牌" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="source in sourceList" :key="source.brandId" :label="source.brandName" :value="String(source.brandId)"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="数量" prop="sourceAmount" :label-width="amountWidth">
                                                                                                                                                                                                <el-input v-model.number="serverTemp.sourceAmount" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="网卡品牌" prop="NICBrandId" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-select v-model="serverTemp.NICBrandId" placeholder="请选择网卡品牌" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="NIC in NICList" :key="NIC.brandId" :label="NIC.brandName" :value="String(NIC.brandId)"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="数量" prop="NICAmount" :label-width="amountWidth">
                                                                                                                                                                                                <el-input v-model.number="serverTemp.NICAmount" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="硬盘品牌" prop="basic.harddiskBrandId" :label-width="formLabelWidth" :rules="[{ required: true, message: '请选择硬盘品牌', trigger: 'change' }]">
                                                                                                                                                                                                <el-select v-model="serverTemp.basic.harddiskBrandId" placeholder="请选择硬盘品牌" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="harddisk in harddiskList" :key="harddisk.brandId" :label="harddisk.brandName" :value="String(harddisk.brandId)"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="容量" prop="basic.harddiskCapacity" :label-width="amountWidth" :rules="[{ required: true, message: '请输入硬盘容量', trigger: 'blur'}]">
                                                                                                                                                                                                <el-input v-model="serverTemp.basic.harddiskCapacity" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="数量" prop="basic.harddiskAmount" :label-width="amountWidth" :rules="[{ required: true, message: '请输入数量'}, { type: 'number', message: '请输入数字' }]">
                                                                                                                                                                                                <el-input v-model.number="serverTemp.basic.harddiskAmount" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item>
                                                                                                                                                                                                <el-button @click="addHarddisk">添加</el-button>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row v-for="(item, index) in serverTemp.add" :key="item.key">
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="硬盘品牌" :prop="'add.' + index + '.harddiskBrandId'" :label-width="formLabelWidth" :rules="[{ required: true, message: '请选择硬盘品牌', trigger: 'change' }]">
                                                                                                                                                                                                <el-select v-model="item.harddiskBrandId" placeholder="请选择硬盘品牌" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="harddisk in harddiskList" :key="harddisk.brandId" :label="harddisk.brandName" :value="String(harddisk.brandId)"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="容量" :prop="'add.' + index + '.harddiskCapacity'" :label-width="amountWidth" :rules="[{ required: true, message: '请输入硬盘容量', trigger: 'blur'}]">
                                                                                                                                                                                                <el-input v-model="item.harddiskCapacity" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item label="数量" :prop="'add.' + index + '.harddiskAmount'" :label-width="amountWidth" :rules="[{ required: true, message: '请输入数量'}, { type: 'number', message: '请输入数字' }]">
                                                                                                                                                                                                <el-input v-model.number="item.harddiskAmount" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="4">
                                                                                                                                                                                          <el-form-item>
                                                                                                                                                                                                <el-button @click="deleteHarddisk">删除</el-button>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                        </el-form>
                                                                                                                                                                        <div slot="footer" class="dialog-footer">
                                                                                                                                                                              <el-button @click="serverFormVisible = false">取 消</el-button>
                                                                                                                                                                              <el-button type="primary" @click="confirmServer">确 定</el-button>
                                                                                                                                                                        </div>
                                                                                                                                                                  </el-dialog>
                                                                                                                                                                  <el-dialog :title="switchText[switchStatus]" :visible.sync="switchFormVisible" size="tiny">
                                                                                                                                                                        <el-form :model="switchTemp" :rules="switchRules" ref="switchTemp">
                                                                                                                                                                              <el-form-item label="设备类型" prop="eqptTypeName" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-input v-model="switchTemp.eqptTypeName" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                              <el-form-item label="品牌名称" prop="brandId" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-select v-model="switchTemp.brandId" placeholder="请选择品牌" :style="inputWidth">
                                                                                                                                                                                          <el-option v-for="brand in eqptBrandList" :key="brand.brandId" :label="brand.brandName" :value="String(brand.brandId)"></el-option>
                                                                                                                                                                                    </el-select>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                              <el-form-item label="设备型号" prop="modelName" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-input v-model="switchTemp.modelName" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                              <el-form-item label="设备规格" prop="eqptSpec" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-select v-model="switchTemp.eqptSpec" placeholder="请选择设备规格" :style="inputWidth">
                                                                                                                                                                                          <el-option v-for="eqptSpec in eqptSpecList" :key="eqptSpec.dictKey" :label="eqptSpec.dictValue" :value="eqptSpec.dictKey"></el-option>
                                                                                                                                                                                    </el-select>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                              <el-form-item label="接口数量" prop="interfaceNum" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-select v-model="switchTemp.interfaceNum" placeholder="请选择接口数量" :style="inputWidth">
                                                                                                                                                                                          <el-option label="8" value="8"></el-option>
                                                                                                                                                                                          <el-option label="12" value="12"></el-option>
                                                                                                                                                                                          <el-option label="16" value="16"></el-option>
                                                                                                                                                                                          <el-option label="24" value="24"></el-option>
                                                                                                                                                                                          <el-option label="48" value="48"></el-option>
                                                                                                                                                                                    </el-select>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                              <el-form-item label="40G口数量" prop="i40gNum" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-input v-model.number="switchTemp.i40gNum" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                        </el-form>
                                                                                                                                                                        <div slot="footer" class="dialog-footer">
                                                                                                                                                                              <el-button @click="switchFormVisible = false">取 消</el-button>
                                                                                                                                                                              <el-button type="primary" @click="confirmSwitch">确 定</el-button>
                                                                                                                                                                        </div>
                                                                                                                                                                  </el-dialog>
                                                                                                                                                                  <el-dialog :title="fireWallText[fireWallStatus]" :visible.sync="fireWallFormVisible" size="tiny">
                                                                                                                                                                        <el-form :model="fireWallTemp" :rules="fireWallRules" ref="fireWallTemp">
                                                                                                                                                                              <el-form-item label="设备类型" prop="eqptTypeName" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-input v-model="fireWallTemp.eqptTypeName" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                              <el-form-item label="品牌名称" prop="brandId" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-select v-model="fireWallTemp.brandId" placeholder="请选择品牌" :style="inputWidth">
                                                                                                                                                                                          <el-option v-for="brand in eqptBrandList" :key="brand.brandId" :label="brand.brandName" :value="String(brand.brandId)"></el-option>
                                                                                                                                                                                    </el-select>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                              <el-form-item label="设备型号" prop="modelName" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-input v-model="fireWallTemp.modelName" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                              <el-form-item label="设备规格" prop="eqptSpec" :label-width="universalLabelWidth">
                                                                                                                                                                                    <el-select v-model="fireWallTemp.eqptSpec" placeholder="请选择设备规格" :style="inputWidth">
                                                                                                                                                                                          <el-option v-for="eqptSpec in eqptSpecList" :key="eqptSpec.dictKey" :label="eqptSpec.dictValue" :value="eqptSpec.dictKey"></el-option>
                                                                                                                                                                                    </el-select>
                                                                                                                                                                              </el-form-item>
                                                                                                                                                                        </el-form>
                                                                                                                                                                        <div slot="footer" class="dialog-footer">
                                                                                                                                                                              <el-button @click="fireWallFormVisible = false">取 消</el-button>
                                                                                                                                                                              <el-button type="primary" @click="confirmFireWall">确 定</el-button>
                                                                                                                                                                        </div>
                                                                                                                                                                  </el-dialog>
                                                                                                                                                                  <el-dialog :title="cpeText[cpeStatus]" :visible.sync="cpeFormVisible">
                                                                                                                                                                        <el-form :model="cpeTemp" :rules="cpeRules" ref="cpeTemp">
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="设备类型" prop="eqptTypeName" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="cpeTemp.eqptTypeName" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="品牌名称" prop="brandId" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-select v-model="cpeTemp.brandId" placeholder="请选择品牌" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="brand in eqptBrandList" :key="brand.brandId" :label="brand.brandName" :value="String(brand.brandId)"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="设备型号" prop="modelName" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="cpeTemp.modelName" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="设备规格" prop="eqptSpec" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-select v-model="cpeTemp.eqptSpec" placeholder="请选择设备规格" :style="inputWidth">
                                                                                                                                                                                                      <el-option v-for="eqptSpec in eqptSpecList" :key="eqptSpec.dictKey" :label="eqptSpec.dictValue" :value="eqptSpec.dictKey"></el-option>
                                                                                                                                                                                                </el-select>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="CPU型号" prop="cpuModel" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="cpeTemp.cpuModel" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="CPU核数" prop="cpuCoreNum" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model.number="cpeTemp.cpuCoreNum" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="内存型号" prop="ramModel" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="cpeTemp.ramModel" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="内存容量" prop="ramVolume" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="cpeTemp.ramVolume" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="硬盘型号" prop="diskModel" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="cpeTemp.diskModel" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="硬盘大小" prop="diskVolume" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model="cpeTemp.diskVolume" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                              <el-row>
                                                                                                                                                                                    <el-col :span="12">
                                                                                                                                                                                          <el-form-item label="网口数量" prop="ethernetNum" :label-width="formLabelWidth">
                                                                                                                                                                                                <el-input v-model.number="cpeTemp.ethernetNum" auto-complete="off" :style="inputWidth"></el-input>
                                                                                                                                                                                          </el-form-item>
                                                                                                                                                                                    </el-col>
                                                                                                                                                                              </el-row>
                                                                                                                                                                        </el-form>
                                                                                                                                                                        <div slot="footer" class="dialog-footer">
                                                                                                                                                                              <el-button @click="cpeFormVisible = false">取 消</el-button>
                                                                                                                                                                              <el-button type="primary" @click="confirmCpe">确 定</el-button>
                                                                                                                                                                        </div>
                                                                                                                                                                  </el-dialog> -->

            <!-- 品牌导入对话框 -->
            <!-- <el-dialog :title="importTitle[importStatus]" size="small" :visible.sync="importVisible">
                                                                                                                                                                        <div v-if="importVisible">
                                                                                                                                                                              <dropzone id="Dropzone" :url="uploadUrl[importStatus]" :acceptedFileTypes="'.xls'" @vdropzone-error="showError" @vdropzone-success="showSuccess" ref="submitFiles">
                                                                                                                                                                                    <input type="hidden" name="token" value="xxx">
                                                                                                                                                                              </dropzone>
                                                                                                                                                                        </div>
                                                                                                                                                                        <div slot="footer" class="dialog-footer">
                                                                                                                                                                              <el-button @click="importVisible = false">取 消</el-button>
                                                                                                                                                                              <el-button type="info" @click="submitFiles">提 交</el-button>
                                                                                                                                                                        </div>
                                                                                                                                                                  </el-dialog> -->
      </div>
</template>
<script>
import Dropzone from '@/components/Drop-zone';

export default {
      components: {
            Dropzone
      },
      data() {
            var validateIpSegment = (rule, value, callback) => {
                  // console.log(value);
                  if (!value) {
                        callback(new Error('请输入所属网段'));
                  }
                  setTimeout(() => {
                        var filter = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\/([1-2]\d|3[0-2]|[1-9]){1}$/;
                        // console.log(filter.test(value));
                        if (!filter.test(value)) {
                              callback(new Error('请输入正确网段格式'));
                        } else {
                              callback();
                        }
                  }, 500);
            };
            var validateIp = (rule, value, callback) => {
                  console.log(this.inPageTemp.IPSegment);
                  var parent = this.inPageTemp.IPSegment.slice(0, this.inPageTemp.IPSegment.lastIndexOf('.'));
                  console.log(parent);
                  var child = value.slice(0, value.lastIndexOf('.'));
                  var front = '';
                  var back = '';
                  var differ = '';
                  if (rule.field === 'endIp') {
                        front = this.inPageTemp.startIp.slice(this.inPageTemp.startIp.lastIndexOf('.') + 1);
                        back = this.inPageTemp.endIp.slice(this.inPageTemp.endIp.lastIndexOf('.') + 1);
                        differ = pareInt(back) - parseInt(front);
                  }
                  if (!value) {
                        if (rule.field === 'startIp') {
                              callback(new Error('请输入起始IP'));
                        } else {
                              callback(new Error('请输入结束IP'));
                        }
                  }
                  setTimeout(() => {
                        var filter = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
                        if (!filter.test(value)) {
                              callback(new Error('请输入正确IP格式'));
                        } else {
                              if (value != parent) {
                                    console.log(value);
                                    console.log(parent);
                                    callback(new Error('请输入与所属网段一致的IP'));
                              } else {
                                    if (rule.field === 'endIp') {
                                          if (differ < 0) {
                                                callback(new Error('终止IP不能小于起始IP'));
                                          } else if (differ > 9) {
                                                callback(new Error('最多插入十条IP'));
                                          } else {
                                                callback();
                                          }
                                    } else {
                                          callback();
                                    }
                              }
                        }
                  }, 500);
            };
            return {
                  tableData: null,
                  list: null,
                  listCopy: null,
                  listLoading: true,
                  listQuery: {
                        page: 1,
                        limit: 10,
                        total: null
                  },
                  // 页签绑定
                  activeName: 'IPAddress',
                  // 页面多个下拉框绑定数据
                  inPageTemp: {
                        netType: '',
                        IPSegment: '',
                        state: '',
                        ip: ''
                  },
                  // 页面中网络类型数组
                  inPageNetTypeList: [],
                  // 对话框中网络类型数组
                  netTypeList: [],
                  // IP网段下拉框
                  inPageIPSegmentList: [],
                  ipSegmentFormVisible: false,
                  ipSegmentTemp: {
                        netType: '',
                        ipSegment: '',
                        startIp: '',
                        endIp: ''
                  },
                  ipSegmentRules: {
                        netType: [
                              { required: true, message: '请选择IP网段', trigger: 'change' }
                        ],
                        ipSegment: [
                              { validator: validateIpSegment, required: true, trigger: 'blur' }
                        ],
                        startIp: [
                              { validator: validateIp, required: true, trigger: 'blur' }
                        ],
                        endIp: [
                              { validator: validateIp, required: true, trigger: 'blur' }
                        ]
                  },
                  netTypeWidth: {
                        width: '95%'
                  },
                  inputWidth: {
                        width: '90%'
                  }
            };
      },
      created() {
            // 获取IP列表
            this.getIpInfo('all');
            // 获取网络类型下拉列表
            this.getNetTypeList();
      },
      methods: {
            // 获取IP列表
            getIpInfo(state) {
                  var netType = '';
                  var IPSegment = '';
                  var state = '';
                  var ip = '';
                  if (state === 'all') {
                        this.inPageTemp.netType = '';
                        this.inPageTemp.IPSegment = '';
                        this.inPageTemp.state = '';
                        this.inPageTemp.ip = '';
                  }
                  if (this.inPageTemp.netType === '' || this.inPageTemp.netType === '0') {
                        netType = '0';
                  } else {
                        netType = this.inPageTemp.netType;
                  }
                  if (this.inPageTemp.IPSegment === '' || this.inPageTemp.IPSegment === '0') {
                        IPSegment = '0';
                  } else {
                        IPSegment = this.inPageTemp.IPSegment;
                  }
                  if (this.inPageTemp.state === '' || this.inPageTemp.state === '2') {
                        state = '2';
                  } else {
                        state = this.inPageTemp.state;
                  }
                  var url = '/resman/ipaddress/list?netType=' + netType + '&ipSegment=' + IPSegment + '&state=' + state + '&ip=' + this.inPageTemp.ip;
                  this.listLoading = true;
                  this.$http.get(url)
                        .then((response) => {
                              // console.log(response);
                              if (response.code === 0) {
                                    this.list = response.data;
                                    this.listCopy = response.data;
                                    this.listQuery.total = response.data.length;
                                    this.listLoading = false;
                                    this.pageChange(this.listQuery.page);
                              }
                        })
                        .catch(function(response) {
                              console.log(response);
                        })
            },
            // 获取网络类型下拉列表
            getNetTypeList() {
                  this.$http.get('/sys/dictionary/listById/net_type')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response);
                                    var all = [{ dictKey: '0', dictValue: '全部网络类型' }];
                                    this.netTypeList = response.data;
                                    this.inPageNetTypeList = all.concat(response.data);
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            // 选择网络类型获取IP网段
            selectNetType(val) {
                  // console.log(val);
                  this.inPageTemp.IPSegment = '';
                  this.$http.get('/resman/ipaddress/ipsegmentlist/' + val)
                        .then((response) => {
                              // console.log(response);
                              if (response.code === 0) {
                                    response.data.forEach((item) => {
                                          item.ipSegmentId = item.ipSegment;
                                    });
                                    // console.info(response.data);
                                    if (response.data.length > 1) {
                                          response.data.unshift({ ipSegment: '全部IP网段', ipSegmentId: '0' });
                                    }
                                    this.inPageIPSegmentList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            // tab标签切换
            handleClick(tab) {
                  if (tab.name === 'IPAddress') {

                  } else {

                  }
            },
            //以下，分页函数
            handleSizeChange(val) {
                  this.listQuery.limit = val;
                  this.pageChange(this.listQuery.page);
            },
            handleCurrentChange(val) {
                  this.listQuery.page = val;
                  this.pageChange(val);
            },
            pageChange(page) {
                  this.tableData = this.listCopy.slice((page - 1) * this.listQuery.limit, page * this.listQuery.limit);
            },
            // 新建 IP段或IP地址
            createIP(command) {
                  if (command === 'IPSegment') {
                        this.ipSegmentFormVisible = true;
                        this.resetIPSegment();
                  } else if (command === 'IPAddress') {

                  }
            },
            // 确认新建IP段
            confirmIPSegment() {
                  console.log(this.ipSegmentTemp);
                  this.$refs['ipSegmentTemp'].validate((valid) => {
                        if (valid) {
                              this.$http.post('/resman/ipaddress/addregion', this.ipSegmentTemp)
                                    .then((response) => {
                                          // console.log(response);
                                          if (response.code === 0) {
                                                this.ipSegmentFormVisible = false
                                                this.showMessage('创建成功!', 'success');
                                                this.getIpInfo('all');
                                          } else {
                                                this.ipSegmentFormVisible = false
                                                console.log(response.msg);
                                                this.showMessage('系统错误!', 'error');
                                          }
                                    }).catch((response) => {
                                          console.log(response);
                                    })
                        } else {
                              console.log('error submit!!');
                              return false;
                        }
                  });
            },
            // 重置IPSegment
            resetIPSegment() {
                  if (this.$refs['ipSegmentTemp']) {
                        this.$refs['ipSegmentTemp'].resetFields();
                  }
                  this.ipSegmentTemp = {
                        netType: '',
                        ipSegment: '',
                        startIp: '',
                        endIp: ''
                  }
            },
            // 导出 IP列表 或模版
            IPexport() {

            },
            showMessage(msg, type) {
                  this.$message({
                        message: msg,
                        type: type
                  });
            }
      }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.filter-container {
      padding-bottom: 10px;
      .filter-item {
            margin-bottom: 10px;
      }
}

.pagination-container {
      margin-top: 30px;
}

.infoColor {
      color: #58B7FF
}

.silverColor {
      color: #8492A6
}
</style>